Widebar simple

El otro día añadíamos una widebar con pestañas algo bastante útil para despejar la sidebar. No tendría objeto añadir una widebar simple en plantillas de una sola sidebar a no ser que le demos unos estilos diferentes a la sidebar, color de fondo, imagen, fuentes...
Atendiendo la petición de Víctor vamos a añadir una widebar para plantillas de tres columnas (entiéndase tres columnas main, sidebar y newsidebar)

VER EJEMPLO

Lo que Víctor desea es un espacio cuyo tamaño ocupe las dos sidebar, ese espacio lo podemos usar no solo para decoración sino para destacar algún motivo del blog.
El abanico de posibilidades para una widebar es muy amplio, desde añadir publicidad, imágenes aleatorias, o como en el caso de La Bloguería que se han incluido las etiquetas con efecto rollover consiguiendo un resultado muy atractivo.

Antes de poner manos a la obra ?qué tal si nos descargamos una copia de la plantilla?

Para añadir la widebar nos ubicamos en plantilla edición de HTML, buscamos:
<div id='main wrapper'> justo antes añadimos:

<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section>
</div>

Hace tiempo La Bloguería nos proporcionaba una imagen que me pareció muy importante para localizar el lugar donde añadir la widebar. Les recomiendo verla sobre todo a los que están utilizando una plantilla adaptada y les resulta más complicado ubicar algo en la plantilla.

El siguiente código es para los estilos de la widebar, podemos añadirlo antes de ]]>:<b:skin> (es la forma de no eliminar ningún cierre de otro estilo añadido).

También podemos añadirlo justo después de:
#sidebar-wrapper {
aquí más código..
aquí más código..
}
Si lo hacemos de este modo tendremos más organizada la plantilla.

#widebar-wrapper {
width:340px;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#widebar {
width:340px;
padding:10px 0 5px 10px;
}

Antes de guardar los cambios tendremos que modificar en width:340px; considerando que nuestra widebar debe medir la suma de las dos sidebar.

#sidebar-wrapper + #newsidebar-wrapper = #widebar-wrapper

Hay que pensar también el lugar donde vamos a añadir nuestra widebar, si es a la derecha no tendremos que modificar nada pero si es a la izquierda sustituimos float:right; por float: left;

A nuestra widebar podemos añadirle cualquier estilo en #widebar-wrapper
border: 1px solid #ccc; "Borde - color"
background:#ffffff; "Color de fondo"
background:url('url-imagen-de-fondo'); "Imagen de fondo"

! Suerte ¡